<div style="padding:20px;">
    <div id="dituiuser" v-cloak>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;">地推转化数据配置</span>
                <el-button style="float: right;" type="primary" :disabled="butajaxing" @click="opmNewzdInit(1)">确定修改</el-button>
                <el-button style="float: right;margin-right:20px;" type="info" :disabled="butajaxing" @click="new_zhuanhuaArr=[]">清空</el-button>
            </div>
            <div style="display: flex;">
                <div v-for="(item, index) in zhanghua_oldArr" style="flex:1;color:#333;">
                    <div style="padding:10px;">
                        <div style="color:#999;">原名：{{item}}</div>
                        <div>
                            <div>
                                <span>
                                    <el-input v-model="new_zhuanhuaArr[index]" maxlength="10" autocomplete="off"></el-input>
                                </span>
                            </div>
                            <div v-if="new_zhuanhuaArr[index]!=null && new_zhuanhuaArr[index]!=''">
                                <span style="vertical-align:-webkit-baseline-middle;">
                                    <el-color-picker v-model="new_color_zhuanhuaArr[index]" :key="index"></el-color-picker>
                                </span>
                                <span style="color:#999;">(主题色)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--            <div style="padding-bottom:40px;"><el-button style="float: right;" type="primary" :disabled="butajaxing" @click="opmNewZd(11)">确定修改主题颜色</el-button></div>-->
        </el-card>

        <el-card class="box-card" style="margin-top:20px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;">学员分配班级数据配置</span>
                <el-button style="float: right;" type="primary" :disabled="butajaxing" @click="opmNewzdInit(2)">确定修改</el-button>
                <el-button style="float: right;margin-right:20px;" type="info" :disabled="butajaxing" @click="new_fenbanArr=[]">清空</el-button>
            </div>
            <div style="display: flex;flex-wrap: wrap;">
                <div v-for="(item, index) in fenban_oldArr" style="width:140px;color:#333;">
                    <div style="padding:10px;">
                        <div style="color:#999;">原名：{{item}}</div>
                        <div>
                            <el-input v-model="new_fenbanArr[index]" maxlength="10" autocomplete="off"></el-input>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>

        <el-card class="box-card" style="margin-top:20px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;">附近学校数据配置</span>
                <el-button style="float: right;" type="primary" :disabled="butajaxing" @click="opmNewzdInit(3)">确定修改</el-button>
                <el-button style="float: right;margin-right:20px;" type="info" :disabled="butajaxing" @click="new_schoolArr=[]">清空</el-button>
            </div>
            <div style="display: flex;flex-wrap: wrap">
                <div v-for="(item, index) in school_oldArr" style="width:140px;color:#333;">
                    <div style="padding:10px;">
                        <div style="color:#999;">原名：{{item}}</div>
                        <div>
                            <el-input v-model="new_schoolArr[index]" maxlength="10" autocomplete="off"></el-input>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>

        <el-card class="box-card" style="margin-top:20px;">
            <div slot="header" class="clearfix">
                <span>注意：课程数据配置：如，</span><span style="font-weight: bold;color:#F00;">基础拼写#10</span><span style="padding-left:10px;font-weight:bold;">【表示 “基础拼写” 课程有 10个课时】</span>
                <el-button style="float: right;" type="primary" :disabled="butajaxing" @click="opmNewzdInit(4)">确定修改</el-button>
                <el-button style="float: right;margin-right:20px;" type="info" :disabled="butajaxing" @click="keArr_new=[]">清空</el-button>
            </div>
            <div style="display: flex;flex-wrap: wrap">
                <div v-for="(item, index) in keArr_old" style="width:260px;color:#333;">
                    <div style="padding:10px;">
<!--                        <div style="color:#999;">原名：{{item}}</div>-->
                        <div>
                            <el-input v-model="keArr_new[index]" maxlength="10" autocomplete="off" style="width:100%;"></el-input>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>

<!--        <el-color-picker-->
<!--                v-model="colors[index]"-->
<!--                :key="index"-->
<!--                v-for="(color, index) in colors"-->
<!--        ></el-color-picker>-->
    </div>
</div>

<script>
    var _theData = <?php echo json_encode($data); ?>;
    console.log(_theData);
    //alert(BASE_URL+"***"+STORE_URL);
    var _this = null;
    new Vue({
        el: '#dituiuser',
        data: {
            colors: ['#ff0000','#00ff00','#0000ff'],
            test:'aaaaaaaaaaaa',
            zhanghua_oldArr:[],
            zhanghua_color_oldArr:[],
            fenban_oldArr:[],
            school_oldArr:[],
            keArr_old:[],

            new_zhuanhuaArr:[],
            new_color_zhuanhuaArr:[],
            new_fenbanArr:[],
            new_schoolArr:[],
            keArr_new:[],
            butajaxing:false,
        },
        mounted(){
            _this = this;
            this.zhanghua_oldArr = _theData.zhanghua_oldArr;
            this.zhanghua_color_oldArr = _theData.zhanghua_color_oldArr;
            this.fenban_oldArr = _theData.fenban_oldArr;
            this.school_oldArr = _theData.school_oldArr;
            this.new_zhuanhuaArr = _theData.new_zhuanhuaArr;
            this.new_color_zhuanhuaArr = _theData.new_color_zhuanhuaArr;
            this.new_fenbanArr = _theData.new_fenbanArr;
            this.new_schoolArr = _theData.new_schoolArr;
            this.keArr_old = _theData.keArr_old;
            this.keArr_new = _theData.keArr_new;
        },
        methods: {
            test(){},
            zhTxtAndColor(){
                this.opmNewZd(1);
                this.opmNewZd(11);
            },
            opmNewzdInit(type){
                var pwd =  /123123/;
                this.$prompt("请输入操作密码", "确定修改数据配置？", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    inputPattern: pwd,
                    type: "warning",
                    inputErrorMessage: "口令错误",
                }).then(() => {
                    if(type==1){
                        // 字符和颜色同步修改
                        _this.opmNewZd(1);
                        _this.opmNewZd(11);
                    }
                    else{
                        _this.opmNewZd(type);
                    }
                })
                .catch(() => {_this.butajaxing = false;});
            },
            opmNewZd(type){
                var inNewArr = [];
                type==1 ? inNewArr = this.new_zhuanhuaArr : "";
                type==11 ? inNewArr = this.new_color_zhuanhuaArr : "";
                type==2 ? inNewArr = this.new_fenbanArr : "";
                type==3 ? inNewArr = this.new_schoolArr : "";
                type==4 ? inNewArr = this.keArr_new : "";
                var isRun = false;
                //但凡找到一个非空，就可以往下运行
                for (const key in inNewArr) {
                    if($.trim(inNewArr[key])!=''){
                        isRun = true;
                        break;
                    }
                }
                if(isRun==false){
                    _this.$message.error("请至少填写一项字典数据");
                    return false;
                }

                _this.butajaxing = true;
                $.post('/index.php?s=/store/ditui.Dtzidian/opmnewzd', {"type":type, "inNewArr":inNewArr}, function (_res) {
                    console.log('aaaaa', _res, _res.code)
                    _this.butajaxing = false;
                    if(_res.code==0){
                        _this.$message.error(_res.msg);
                    }
                    else{
                        _this.$message({ message: '修改成功', type: 'success' });
                        //window.location = window.location;
                        //_this.search('no');
                    }
                })
            }
        }
    });
</script>